<div class="container" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">
  <div class="side-quest-version">
    SideQuest Version: v{{appService.versionName}}
  </div>
  <div class="row">
    <div class="col s12">
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">SideQuest Folders</div>
      <div class="button-section">
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
          (click)="appService.openFolder(folder.MAIN)">
          Open Main App Folder
        </div>
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="appService.openFolder(folder.APK_BACKUPS)">
          Open APK Backup Folder
        </div>
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="appService.openFolder(folder.ADB)">
          Open ADB Folder
        </div>
      </div>


      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Manage 3rd Party Repos</div>
      <div class="button-section">
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             routerLink="/repos"
        >Manage Repos</div
        >&nbsp;&nbsp;&nbsp;&nbsp;
      </div>


      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Pavlov Audio</div>
      <div class="button-section">
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setPavlovPermission()"
        >Grant Pavlov Audio Permission</div
        >&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Chromatic Aberration</div>
      This will enable/disable chromatic aberration.
      <div class="button-section">
        <div class="waves-effect waves-light btn set-ca margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setCa(CA.APP)">Default</div>
        <div class="waves-effect waves-light btn set-ca margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setCa(CA.APP)">App Selected</div>
        <div class="waves-effect waves-light btn set-ca margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setCa(CA.ON)">On</div>
        <div class="waves-effect waves-light btn set-ca margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setCa(CA.OFF)">Off</div>
      </div>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Paste Text to your device</div>
      If there is a text input field focussed on your headset you can paste / type text in here to have SideQuest type it out on your headset. Good for long passwords you don't want to have to type on a virtual keyboard.
      <div class="button-section">
        <div class="input-field ">
          <input id="devicePaste" [ngClass]="{'input-dark-theme':appService.currentTheme === 'dark','input-light-theme':appService.currentTheme === 'light'}" [type]="isPassword?'password':'text'" [(ngModel)]="textToSend"/>
          <label for="devicePaste" [ngClass]="{'label-dark-theme':appService.currentTheme === 'dark','label-light-theme':appService.currentTheme === 'light'}">Text to Paste</label>
        </div>
        <div class="switch">
          <label>
            Text
            <input type="checkbox" [(ngModel)]="isPassword" />
            <span class="lever"></span>
            Password
          </label>
        </div>
        <div class="waves-effect waves-light btn paste-text-button right pink-button"
             (click)="pasteToDevice()"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}">Send</div>
      </div>
      <br><br>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">
        Set FFR ( Fixed Foveated Rendering ) level
      </div>
      This will change how the view is rendered in the outer edges of the viewscreen for each eye. Higher is better
      performance, lower is better quality.
      <div class="button-section">
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setFFR(FFR.MEDIUM)">Default</div>
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setFFR(FFR.OFF)">Off</div>
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setFFR(FFR.LOW)">Low</div>
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setFFR(FFR.MEDIUM)">Medium</div>
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setFFR(FFR.HIGH)">High</div>
        <div
          class="waves-effect waves-light btn margin-bottom margin-right pink-button"
          [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setFFR(FFR.HIGH_TOP)">High Top</div>
      </div>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Set CPU and GPU level</div>
      This can improve performance for 2D apps & games.
      <div class="button-section">
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setGPU(GPU._2)">Default</div>
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setGPU(GPU._2)">Level 2</div>
        <div class="waves-effect waves-light btn margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}"
             (click)="setGPU(GPU._4)">Level 4</div>
      </div><div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Default Texture Size</div>
      This will change how high quality some of the in game textures are rendered at.
      <div class="button-section">
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._1024)">Default</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._512)">512</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._768)">768</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._1024)">1024</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._1280)">1280</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._1536)">1536</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._2048)">2048</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._2560)">2560</div>
        <div class="waves-effect waves-light btn set-sso margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSSO(SSO._3072)">3072</div>
      </div>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Capture Video Bitrate ( Go Only )</div>
      This will increase the quality of captured videos on Oculus Go.

      <div class="button-section">
        <div class="waves-effect waves-light btn set-svb margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVB(SVB._5Mbps)">Default</div>
        <div class="waves-effect waves-light btn set-svb margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVB(SVB._5Mbps)">5Mbps</div>
        <div class="waves-effect waves-light btn set-svb margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVB(SVB._15Mbps)">15Mbps</div>
        <div class="waves-effect waves-light btn set-svb margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVB(SVB._25Mbps)">25Mbps</div>
      </div>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Video Recording Resolution ( Go Only )</div>
      This will increase the resolution of captured videos on Oculus Go.
      <div class="button-section">
        <div class="waves-effect waves-light btn set-svr margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVR(SVR._1024)">Default</div>
        <div class="waves-effect waves-light btn set-svr margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVR(SVR._1024)">1024</div>
        <div class="waves-effect waves-light btn set-svr margin-bottom margin-right pink-button"
             [ngClass]="{'button-dark-theme':appService.currentTheme === 'dark','button-light-theme':appService.currentTheme === 'light','waves-dark':true,'waves-light':false}" (click)="setSVR(SVR._1536)">1536</div>
      </div>
      <div class="section-title" [ngClass]="{'text-dark-theme':appService.currentTheme === 'dark','text-light-theme':appService.currentTheme === 'light'}">Destroy The World</div>
      Click this to release all the goblins and endanger the future of humanity. Do not do this!
      <div class="button-section">
        <div class="switch">
          <label>
            Bad
            <input type="checkbox" [(ngModel)]="appService.hideNSFW" (change)="setHideNSFW()"/>
            <span class="lever"></span>
            Safe
          </label>
        </div>
      </div>
    </div>
  </div>



</div>
